feat: add theme.shapes and cornersToStyle#4919
feat: add theme.shapes and cornersToStyle#4919adrcotfas wants to merge 1 commit into@adrcotfas/refactor/tokens_statefrom
Conversation
Adds the 10 MD3 shape scale tokens to theme.shapes.*, ShapeCorners for directional variants, and cornersToStyle() for mapping to RN style props. Deprecates theme.roundness in favour of theme.shapes.
|
Hey @adrcotfas, thank you for your pull request 🤗. The documentation from this branch can be viewed here. |
|
The mobile version of example app from this branch is ready! You can see it here. |
| /** @deprecated Use `theme.shapes.*` instead. Will be removed in a future version. */ | ||
| roundness: number; |
There was a problem hiding this comment.
Don't keep deprecated values in the theme. It makes things more complicated for components. If there is a replacement, drop the old one.
| export { default as PaperProvider } from './core/PaperProvider'; | ||
| export { default as shadow } from './theme/shadow'; | ||
| export { default as configureFonts } from './theme/fonts'; | ||
| export { cornersToStyle } from './theme/tokens/sys/shape'; |
There was a problem hiding this comment.
Don't expose such tiny utilities. Keep the library public API surface small. It's very straightforward for users to write such utility themselves, should they need it.
| import type { ShapeCorners, ThemeShapes } from '../../types'; | ||
|
|
||
| export const defaultShapes: ThemeShapes = { | ||
| none: 0, |
There was a problem hiding this comment.
Don't think it makes sense to expose none as a customizable theme value. It'll always be 0.
| extraLarge: 28, | ||
| extraLargeIncreased: 32, | ||
| extraExtraLarge: 48, | ||
| full: 9999, |
There was a problem hiding this comment.
Same as none. Don't think it makes sense to expose it as a customizable theme value.
| colors: ThemeColors; | ||
| fonts: Typescale; | ||
| state: ThemeState; | ||
| shapes: ThemeShapes; |
There was a problem hiding this comment.
I'm not sure about the name "shapes". It says "shapes" but it exposes roundness/border radius values, not actual shapes, so the name is confusing.
| export type ShapeCorners = { | ||
| topStart: number; | ||
| topEnd: number; | ||
| bottomStart: number; | ||
| bottomEnd: number; | ||
| }; |
There was a problem hiding this comment.
Not sure we need this. Isn't this just style properties?
3 participants
Motivation
Adds the 10 MD3 shape scale tokens to theme.shapes.*, ShapeCorners for directional variants, and cornersToStyle() for mapping to RN style props. Deprecates theme.roundness in favour of theme.shapes.
Related issue
See https://www.notion.so/callstack/React-Native-Paper-Foundation-for-MD3-Expressive-34c5d027c0f880edba3df107cd35946f?source=copy_link
Merge order:
Test plan
yarn typescript-- no new type errorsyarn test-- all tests pass